<template>
  <div style="background-color: #404855;min-height: 1100px;">
      <el-button v-if="false" type="text" @click="ccClick">TestProc</el-button>
      <el-button v-if="false" type="success" @click="updateResStatusTest">测试更新设备状态</el-button>
      <el-button v-if="false" type="warning" @click="updateResStatusTest2">测试更新设备状态2</el-button>
      <el-button v-if="false" type="primary" @click="dialogTableVisible = true">
        open a Drag Dialog
      </el-button>
      <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" :title="'当前设备: 设备'+curResForm.name+ '[工序1]'" @dragDialog="handleDrag">
<!--        <div v-if="false">
          <el-select ref="select" v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-table :data="gridData">
            <el-table-column property="date" label="Date" width="150" />
            <el-table-column property="name" label="Name" width="200" />
            <el-table-column property="address" label="Address" />
          </el-table>
          <div style="display: flex;justify-content: end;">
            <el-button type="success" @click="updateResStatusTest">确定</el-button>
            <el-button type="warning" @click="updateResStatusTest2">返回</el-button>
          </div>
        </div> -->

        <!-- 以下是设备 Lot_Start选项-->
        <div v-if="curResForm.status == 1">
          <el-form ref="form" :model="curResForm.prods" label-width="80px" style="width:400px;">
            <el-form-item label="产品名称">
              <el-input v-model="curResForm.prods.name"></el-input>
            </el-form-item>
            <el-form-item label="产品批次">
              <el-input v-model="curResForm.prods.lot_id"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitLotStart">提交</el-button>
              <el-button type="warning" @click="onSubmitResStop">临时停机</el-button>
              <el-button @click="()=>{dialogTableVisible = false; this.curResForm.prods = {name:'',lot_id:''}}">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 以下是设备 Lot_End选项-->
        <div v-if="curResForm.status == 2">
          <el-form ref="form" :model="curResForm.prods" label-width="80px" style="width:400px;">
            <el-form-item label="产品名称">
              <el-input v-model="curResForm.prods.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="产品批次">
              <el-input v-model="curResForm.prods.lot_id" disabled></el-input>
            </el-form-item>
            <el-form-item label="产品数量">
              <el-input type='number' v-model="curResForm.prods.qty" min='1'></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitLotEnd">提交</el-button>
              <el-button @click="dialogTableVisible = false;">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 以下是设备 开机选项-->
        <div v-if="curResForm.status == 0 || curResForm.status == 10 ">
          <el-form ref="form" :model="curResForm.prods" label-width="80px" style="width:400px;">
            <el-form-item>
              <el-button type="primary" @click="onSubmitResStart">开机</el-button>
              <el-button @click="()=>{dialogTableVisible = false;}">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

      </el-dialog>

<!--      <div style='display: flex;justify-content: space-between;width:350px;margin-left:20px;padding:3px;border:1px solid #909399;'>
        <el-tag type="success" effect="dark" style="width:70px;text-align: center;"> 生产中 </el-tag>
        <el-tag type="warning" effect="dark" style="width:90px;text-align: center;"> 开机待生产 </el-tag>
        <el-tag type="info" effect="dark" style="width:70px;text-align: center;"> 停机 </el-tag>
        <el-tag type="danger" effect="dark" style="width:70px;text-align: center;"> 临时停机 </el-tag>
      </div> -->
      <div style="display: flex;justify-content: end;padding-top:20px;margin:0 70px 20px 70px;border-bottom:2px solid gray;justify-items:center;eight: 30px;line-height: 30px;">
        <div style="color:#fff;margin-right:54px;margin-bottom: 10px;font-size: 30px;font-weight: bold;">Doosan MES</div>
      </div>
      <div style="display: flex;justify-content: end;margin-right:80px;justify-items:center;eight: 30px;line-height: 30px;">
        <div style="width:30px;height:30px;background-color: #5ba13a;margin-right:6px;"> </div>
        <div style="color:#fff;margin-right:16px;">开机</div>
        <div style="width:30px;height:30px;background-color: #E6A23C;margin-right:6px;"> </div>
        <div style="color:#fff;margin-right:16px;">待机</div>
        <div style="width:30px;height:30px;background-color: #909399;margin-right:6px;"> </div>
        <div style="color:#fff;">停机</div>
      </div>
    <div class="components-container board">
      <Kanban :key="1" :list="list[0]" :group="group" class="kanban todo" :header-text="'工序1 ('+list[0].length+'台)'" @handleClick="handleClick" />
      <Kanban :key="2" :list="list[1]" :group="group" class="kanban working" :header-text="'工序2 ('+list[1].length+'台)'" @handleClick="handleClick" />
      <Kanban :key="3" :list="list[2]" :group="group" class="kanban done" :header-text="'工序3 ('+list[2].length+'台)'" @handleClick="handleClick" />
      <Kanban :key="4" :list="list[3]" :group="group" class="kanban hold" :header-text="'工序4 ('+list[3].length+'台)'" @handleClick="handleClick" />
    </div>

  </div>
</template>
<script>
import axios from 'axios'
import Kanban from '@/components/Kanban'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  name: 'DragKanbanDemo',
  directives: { elDragDialog },
  components: {
    Kanban
  },
  data() {
    return {
      group: 'mission',
      list:[
        [
          { oper_id:'1',name: 'A-1', id: 1 , status: 0, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}}, //0:STOP (No Order), 1: Start (has Order and waiting for run), 2 Run (Move in ) 10:Hold
          { oper_id:'1',name: 'A-2', id: 2 , status: 1, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}},
          { oper_id:'1',name: 'A-3', id: 3 , status: 2, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}},
          { oper_id:'1',name: 'A-4', id: 4 , status: 10, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}},
          { oper_id:'1',name: 'B-1', id: 5 , status: 0, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}},
          { oper_id:'1',name: 'B-2', id: 6 , status: 1, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}},
          { oper_id:'1',name: 'B-3', id: 7 , status: 1, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}},
          { oper_id:'1',name: 'B-4', id: 8 , status: 2, enable: 1,works:[], prods:{name:'', lot_id:'', qty:'', status:'wait'}}
        ],
        [
          { name: 'C1', id: 1 , status: 0, enable: 1},
          { name: 'C2', id: 2 , status: 0, enable: 1},
          { name: 'C3', id: 3 , status: 0, enable: 1},
          { name: 'C4(暂无)', id: 4 , status: 0, enable: 0},
          { name: 'C5', id: 5 , status: 0, enable: 1},
          { name: 'C6(暂无)', id: 6 , status: 0, enable: 0},
          { name: 'C7', id: 7 , status: 0, enable: 1},
          { name: 'C8', id: 8 , status: 0, enable: 1},
          { name: 'C9', id: 9 , status: 0, enable: 1}
        ],
        [
          { name: 'O1', id: 1 , status: 2, enable: 1},
          { name: 'O2', id: 2 , status: 2, enable: 1}
        ],
        [
          { name: 'S1', id: 1 , status: 0, enable: 1},
          { name: 'S2', id: 2 , status: 1, enable: 1},
          { name: 'S3', id: 3 , status: 0, enable: 1},
          { name: 'S4', id: 4 , status: 0, enable: 1},
          { name: 'S5', id: 5 , status: 0, enable: 1},
          { name: 'S6', id: 6 , status: 0, enable: 1},
          { name: 'S7', id: 7 , status: 0, enable: 1}
        ]
      ],
      dialogTableVisible: false,
      options: [
        { value: '选项1', label: '开机' },
        { value: '选项2', label: '停机' }
      ],
      value: '',
      gridData: [
        {date: '2016-05-02', name: 'John Smith', address: 'No.1518,  Jinshajiang Road, Putuo District' },
        {date: '2016-05-04', name: 'John Smith', address: 'No.1518,  Jinshajiang Road, Putuo District'},
        {date: '2016-05-01', name: 'John Smith', address: 'No.1518,  Jinshajiang Road, Putuo District'},
        {date: '2016-05-03', name: 'John Smith', address: 'No.1518,  Jinshajiang Road, Putuo District'},
      ],
      form:{
        name:'',
        lot_id:'',
        qty:'',
        status:'wait'
      },
      curResInfo:{
        oper_id:'',
        res_id:''
      },
      apiurl : 'https://daisoft.duia.eu:27003/DiDao.ashx?_db=shretec',
      curResForm:{oper_id:'',name: '', id: 0 , status: 0, enable: 0, prods:{name:'', lot_id:'', qty:'', status:'wait'}}
    }
  },
  created(){
    //this.getResList()
  },
  methods: {
    getResList(){
      axios({
        method: "post",
        //headers: {"Content-Type": "multipart/form-data"},
        url: apiurl,
        data: {
          'fields':'U_FD,U_FDType',
          'table':'@BOUDF1',
          '_start':1,
          '_limit':20,
          '_session':3.141592653589793
        }
      }).then(resData => {
          console.log(resData);
      }).catch(err=> {
        console.log(err);
      });
    },
    handleClick(oper_id,id) {
      console.log('click #'+id+',oper_id:'+oper_id)
      this.curResInfo = {
        'oper_id':oper_id,
        'res_id':id
      }
      if(oper_id == '1'){
        //var list = this.list1.map(item=>{return item.id == id ? item : ''})
        var list = this.list[oper_id-1].filter(item=>item.id == id)
        if(list && list.length >0){
          var res_info = JSON.parse(JSON.stringify(list))[0];
          this.curResForm= res_info;
          if(res_info.status == 0 || res_info.status == 10){
            this.dialogTableVisible = true
            console.log('当前设备状态:'+ '停机',this.curResForm)
          }else if(res_info.status == 1){
            this.dialogTableVisible = true
            console.log('当前设备状态:'+ '待机',this.curResForm)
          }else if(res_info.status == 2){
            this.dialogTableVisible = true
            console.log('当前设备状态:'+ '生产中',this.curResForm)
          }else{
            console.log('当前设备状态:'+ '未知,请联系管理员确认')
          }
          console.log('curResForm---------',this.curResForm)
        }
      }
    },
    handleDrag() {
      //this.$refs.select.blur()
    },
    onSubmitLotStart(){
      this.curResForm.status = 2;
      var list = this.list[this.curResInfo.oper_id-1][this.curResInfo.res_id-1];
      list.prods = this.curResForm.prods
      list.status = 2;
      this.dialogTableVisible = false;
      console.log('submit!Lot Start', this.curResForm,list);
    },
    onSubmitLotEnd(){
      this.curResForm.status = 1;
      var list = this.list[this.curResInfo.oper_id-1][this.curResInfo.res_id-1];
      list.status = 1;
      list.works.push(this.curResForm.prods)
      list.prods = {name:'', lot_id:'', qty:'', status:'wait'}
      this.dialogTableVisible = false;
      console.log('submit!Lot End', this.curResForm,list);
    },
    onSubmitResStop(){
      var that = this;
      that.$confirm('确定要停机吗?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
        that.curResForm.status = 10;
        that.dialogTableVisible = false;
          that.$message({
            type: 'success',
            message: '停机操作成功!'
          })
        })
        .catch(err => { console.error(err) })

      console.log('submit!Res Stop', this.curResForm);
    },
    onSubmitResStart(){
      var that = this;
      that.$confirm('确定要开机吗?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
        that.curResForm.status = 1;
        that.dialogTableVisible = false;
          that.$message({
            type: 'success',
            message: '开机操作成功!'
          })
        })
        .catch(err => { console.error(err) })

      console.log('submit!Res Start', this.curResForm);
    },
    updateResStatusTest(){
      // this.list3 = [
      //   { name: 'O1', id: 1 , status: 1, enable: 1},
      //   { name: 'O2', id: 2 , status: 0, enable: 1}
      // ]
      this.list3.map((item,index)=>{
        if(item.name == 'O1'){
          item.status = 1
        }
        return item
      })
    },
    updateResStatusTest2(){
      this.list3 = [
        { name: 'O1', id: 1 , status: 2, enable: 1},
        { name: 'O2', id: 2 , status: 0, enable: 1}
      ]
    },
    ccClick(){
      axios.post(apiurl,{
        'fields':'U_FD,U_FDType',
        'table':'@BOUDF1',
        '_start':1,
        '_limit':20,
        '_session':'3.141592653589793'
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}
</script>
<style lang="scss">
.board {
  // width: 1000px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}
.kanban {
  &.todo {
    .board-column-header {
      background: #333;
    }
    .board-column-content {
      background: #333;
    }
  }
  &.working {
    .board-column-header {
      background: #333;
    }
    .board-column-content {
      background: #333;
    }
  }
  &.done {
    .board-column-header {
      background: #333;
    }
    .board-column-content {
      background: #333;
    }
  }
  &.hold {
    .board-column-header {
      background: #333;
    }
    .board-column-content {
      background: #333;
    }
  }
}
</style>
